<template>
  <div class="department">
    <page-search
      ref="searchRef"
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleResetClick"
    ></page-search>
    <page-content
      ref="contentRef"
      :content-config="contentConfig"
      @ok="handleOk"
      @create-btn-click="handleCreateBtnClick"
      @edit-btn-click="handleEditBtnClick"
    >
      <!-- 自定义显示内容 -->
      <template #leader="scope">
        <el-tag type="success">{{ scope.row[scope.prop] }}</el-tag>
      </template>
      <template #createAt="scope">
        {{ formatUTC(scope.row[scope.prop]) }}
      </template>
      <template #updateAt="scope">
        {{ formatUTC(scope.row[scope.prop]) }}
      </template>
    </page-content>
    <page-modal :modal-config="modalConfigRef" ref="modalRef" @ok="handleOk"></page-modal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModal from '@/components/page-modal/page-modal.vue'
import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import { formatUTC } from '@/utils/format'
import { computed } from 'vue'
import useMainStore from '@/store/main/main'
import usePageContent from '@/hooks/usePageContent'
import usePageModal from '@/hooks/usePageModal'
import usePageSearch from '@/hooks/usePageSearch'

// 对 modalConfig 进行操作
const modalConfigRef = computed(() => {
  const mainStore = useMainStore()

  const departments = mainStore.entireDepartments.map((item) => {
    return { label: item.name, value: item.id }
  })

  modalConfig.formItems.forEach((item) => {
    if (item.prop === 'parentId') {
      item.options?.push(...departments)
    }
  })

  return modalConfig
})

const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
const { modalRef, handleCreateBtnClick, handleEditBtnClick } = usePageModal()
const { searchRef, handleOk } = usePageSearch()
</script>

<style lang="less" scoped></style>
